<template>
  <div>
    <div class="box">
      <header>请输入修改信息</header>
      <div class="box2">
        <el-form
          :inline="true"
          :model="formInline"
          class="demo-form-inline"
          style="z-index: 10000000"
        >
          <el-form-item label="账号">
            <el-input
              v-model="formInline.user"
              placeholder="Approved by"
              disabled
            />
          </el-form-item>
          <el-form-item label="权限">
            <el-radio-group v-model="formInline.permissions">
              <el-radio border label="管理员" />
              <el-radio border label="超级管理员" />
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit(formInline)"
              >确定</el-button
            ><el-button type="primary" @click="ass">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, watch } from "vue";
import { useStore } from "vuex";
import { account } from "../axios/http";
import { ElMessage } from "element-plus";
const store = useStore();
const info = ref();

const formInline = reactive({
  user: "",
  permissions: "1",
});
watch(
  () => store.state.residents,
  (ms) => {
    formInline.user = ms.name;
  }
);

const onSubmit = async (name: any) => {
  if (name.permissions != "1") {
    info.value = store.state.residents;
    info.value.permissions = name.permissions;
    await account(store.state.residents.id, info.value);
    store.commit("rig");
  } else {
    ElMessage.error("不能为空");
  }
};
//取消
function ass() {
  console.log(1);
  store.commit("rig");
}
</script>
<style scoped lang="scss">
.box {
  width: 50%;
  height: 50%;
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  border-radius: 0.0875rem;
  display: flex;
  flex-direction: column;
}
header {
  margin: 0.375rem;
}
.box2 {
  padding: 0.25rem;
}
</style>
